const plugin = require("tailwindcss/plugin");

/** @type {import('tailwindcss').Config} */
module.exports = {
  mode: "jit",
  darkMode: "class", // 'media' or 'class'
  corePlugins: {
    preflight: false, // 关闭 tailwind 基本预设默认样式注入
    aspectRatio: false, // 关闭native aspect ratio
  },
  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
  theme: {
    extend: {
      colors: {
        bg_color: "var(--el-bg-color)",
        primary: "var(--el-color-primary)",
        primary_light_9: "var(--el-color-primary-light-9)",
        text_color_primary: "var(--el-text-color-primary)",
        text_color_regular: "var(--el-text-color-regular)",
        text_color_disabled: "var(--el-text-color-disabled)",
      },
    },
  },
  plugins: [
    /* https://github.com/tailwindlabs/tailwindcss-aspect-ratio */
    require("@tailwindcss/aspect-ratio"),
    /* https://github.com/tailwindlabs/tailwindcss-line-clamp */
    require("@tailwindcss/line-clamp"),
    /* https://tailwindcss.com/docs/typography-plugin */
    require("@tailwindcss/typography"),
    /* https://github.com/tailwindlabs/tailwindcss-forms */
    // require("@tailwindcss/forms"),
    // firefox-variant
    plugin(function ({ addVariant, e, postcss }) {
      addVariant("firefox", ({ container, separator }) => {
        const isFirefoxRule = postcss.atRule({
          name: "-moz-document",
          params: "url-prefix()",
        });
        isFirefoxRule.append(container.nodes);
        container.append(isFirefoxRule);
        isFirefoxRule.walkRules((rule) => {
          rule.selector = `.${e(
            `firefox${separator}${rule.selector.slice(1)}`
          )}`;
        });
      });
    }),
  ],
};
